<template>
	<view class="page">
		<topVue title="分享用户"></topVue>
		<view class="banner">
			<image src="../../static/person/share.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view class="btn margin40" @click="inviteFun()">立即邀请好友</view>
		<view class="btnLink margin30" @click="$tools.route('./poster')">发送邀请海报</view>
		<view class="label">分享补贴</view>
		<view class="text">1. 好友注册立得50积分</view>
		<view class="text">2. 好友购买商品，获得消费补贴</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				isPoster: false,
				cansWidth: 280, //海报宽度
				cansHeight: 606,
				poster:'../../static/poster.jpg',
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		methods: {
			inviteFun(){
				let that = this
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: `https://flsnfuylofsy.sealosbja.site?inviteCode=${that.user.id}`,
					title: "@九玖商城用户 邀请你加入九玖商城！",
					summary: "开启消费新体验！注册即送100积分！",
					imageUrl: "https://www.jjsc.top/avatar/1743947906989app.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(to right, #1AC188, #60A5FA);
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 14rpx;
	}
	.btnLink {
		width: 690rpx;
		height: 88rpx;
		border: #E5E7EB 1rpx solid;
		text-align: center;
		line-height: 88rpx;
		color: #374151;
		font-size: 30rpx;
		border-radius: 14rpx;
	}
	.label {
		font-weight: 600;
		padding: 30rpx 0 20rpx 30rpx;
		font-size: 30rpx;
	}
	.text {
		color: #374151;
		line-height: 1;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
	}
</style>